<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle @click="refreshList"></el-button>
    <el-button type="primary" icon="el-icon-plus" style="margin:10px"
      @click="dialogFormVisibleDL = true">添加下级代理商</el-button>
    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="getAllUserDetailProcessByTimeAsc"></el-button>
    </el-input>
    <!-- <el-button style="margin:10px" @click="allPassUserDetailProcess">一键审核</el-button> -->
    <!--    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="getAllUserDynamicListByTimeDesc"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button> -->
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list" @selection-change="handleSelectionChange">
     <!-- <el-table-column type="selection" width="55" align="center">
      </el-table-column> -->
      <el-table-column prop="advertisementUserId" label="代理商id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="name" label="代理名称" width="100" align="center">
      </el-table-column>
      <el-table-column label="代理级别" align="center">
        <template slot-scope="{ row, $index }">
          <div>{{ row.level == 1 ? '市级代理' : '区县级代理' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="addressDetail" label="详细地址" align="center">
      </el-table-column>
      <el-table-column prop="city" label="代理城市" align="center">
      </el-table-column>
      <el-table-column prop="balance" label="可提现余额" align="center">
      </el-table-column>
      <el-table-column prop="contactName" label="联系人名称" align="center">
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="contactEmail" label="邮箱" align="center">
      </el-table-column>
      <el-table-column label="营业执照" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.licenseUrl"
            v-if="row.licenseUrl" :preview-src-list="[$staticURL+row.licenseUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="身份证正面" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.idcardFront"
            v-if="row.idcardFront" :preview-src-list="[$staticURL+row.idcardFront]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="身份证反面" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.idcardBack"
            v-if="row.idcardBack" :preview-src-list="[$staticURL+row.idcardBack]">
          </el-image>
        </template>
      </el-table-column>
      <!--    <el-table-column label="操作" width="220" align="center">
        <template slot-scope="{ row, $index }">
          <el-tooltip content="查看详情" placement="top" slot="reference">
            <el-button type="primary" icon="el-icon-position">查看</el-button>
          </el-tooltip>
          <el-tooltip content="发布任务" placement="top">
            <el-button type="primary" icon="el-icon-s-promotion" @click="dialogFormVisible = true"></el-button>
          </el-tooltip>

          <el-tooltip content="违规惩罚" placement="top">
            <el-button type="danger" icon="el-icon-warning" @click="dialogFormVisible1 = true"
              style="margin-right: 10px;"></el-button>
          </el-tooltip>

          <el-popconfirm v-if="row.isUse == 0" title="是否启用？" icon="el-icon-info" icon-color="red"
            @confirm="enableAdvertisementUser(row.advertisementUserId)">
            <el-tooltip content="启用" placement="top" slot="reference">
              <el-button type="success" icon="el-icon-video-play"></el-button>
            </el-tooltip>
          </el-popconfirm>
          <el-popconfirm v-if="row.isUse == 1" title="是否停用？" icon="el-icon-info" icon-color="red"
            @confirm="stopAdvertisementUser(row.advertisementUserId)">
            <el-tooltip content="停用" placement="top" slot="reference">
              <el-button type="warning" icon="el-icon-video-pause"></el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 对话框  -->
    <el-dialog title="添加下级代理商" :visible.sync="dialogFormVisibleDL">
      <el-form style="width:80%" :model="tmForm" :rules="rules" ref="ruleForm">
        <el-form-item label="用户名" label-width="150px" prop="userName">
          <el-input autocomplete="off" v-model="tmForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="150px" prop="password">
          <el-input autocomplete="off" type="password" v-model="tmForm.password"></el-input>
        </el-form-item>
        <el-form-item label="当月充值金额指标" label-width="150px" required prop="monthRechargeMoney">
          <el-input autocomplete="off" disabled v-model="tmForm.monthRechargeMoney"></el-input>
        </el-form-item>
        <el-form-item label="奖励金额" label-width="150px" required prop="rewardMoney">
          <el-input autocomplete="off" disabled v-model="tmForm.rewardMoney"></el-input>
        </el-form-item>
        <el-form-item label="广告折扣" label-width="150px" required prop="rate">
          <el-input autocomplete="off" v-model="tmForm.rate" :placeholder="'小数点格式，大于'+advertisementUserMes.rate"></el-input>
        </el-form-item>
        <el-form-item label="用户消费返比例" label-width="150px" required prop="distributionRate">
          <el-input autocomplete="off" v-model="tmForm.distributionRate" :placeholder="'小数点格式，小于'+advertisementUserMes.distributionRate"></el-input>
        </el-form-item>
        <el-form-item label="应交押金金额" label-width="150px" required prop="payableDepositMoney">
          <el-input autocomplete="off" disabled v-model="tmForm.payableDepositMoney"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleDL = false">取 消</el-button>
        <el-button type="primary" @click="getRegister">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <!--    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
  import {
    MessageBox,
    Message
  } from 'element-ui'
  export default {
    name: 'SubordinateAgents',
    mounted() {
      //获取列表数据方法
      this.getAllUserDetailProcessByTimeAsc()
      let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))
      this.advertisementUserMes = advertisementUserMes
      console.log('advertisementUserMes', advertisementUserMes)
    },
    data() {
      return {
        advertisementUserMes:{},
        tmForm: {
          roleId: 9, //广告代理商id
          monthRechargeMoney: 0,
          rewardMoney: 0,
          payableDepositMoney: 2000,
        },
        // 表单验证
        rules: {
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          monthRechargeMoney: [{
            required: true,
            message: '请输入当月充值金额指标',
            trigger: 'blur'
          }],
          distributionRate: [{
            required: true,
            message: '请输入分销佣金比例',
            trigger: 'blur'
          }],
          rate: [{
            required: true,
            message: '请输入广告折扣',
            trigger: 'blur'
          }],
          rewardMoney: [{
            required: true,
            message: '请输入奖励金额',
            trigger: 'blur'
          }],
          payableDepositMoney: [{
            required: true,
            message: '请输入应交押金金额',
            trigger: 'blur'
          }],
        },

        dialogFormVisibleDL: false,
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrl1: '',
        dialogFormVisible: false,
        list: {},
        dialogFormVisible1: false,
        list1: {},
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,
        //列表数据
        list: [],
        ids: [],
        //搜索
        searchText: '',
        evaluatePictureList: [],
      }
    },
    methods: {

      // 添加代理商
      getRegister() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            console.log('添加人员', this.tmForm)
            let res1 = await this.$API.members.addSecondaryUser(this.tmForm);
            console.log('二级广告商注册', res1)
            if (res1.code == 200) {
              this.$message.success('广告商注册成功')
              this.getAllUserDetailProcessByTimeAsc()
            } else {
              this.$message(res1.msg)
            }
            this.dialogFormVisibleDL = false;
          }
        })
      },


      uploadFile(item) {
        console.log(item);
        let formData = new FormData();
        let file = item.raw;
        // this.file = item.raw;
        this.imageUrl1 = URL.createObjectURL(file);
        formData.append("image", file);
        this.formData = formData
        console.log(file, "216")
      },
      // 删除只需清空imageUrl1即可
      handleRemove1(file, fileList) {
        // console.log(file, fileList);
        this.imageUrl1 = "";
      },
      // 预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = this.imageUrl1;
        this.dialogVisible = true;
      },
      aa() {
        /* console.log(this.list1)
          return false; */
        axios({
          method: "post",
          url: "https://api.yushiai.com.cn/biz/uploadImgage",
          data: this.formData,
          headers: {
            'session_token': getToken(),
            'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryLOZf2MbOw2wkMpjv'
          },
        }).then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(res.data.data.imgageUrl)
            this.list1.iconUrl = res.data.data.imgageUrl
            console.log(this.list1)
            this.$refs.ruleForm.validate(async (valid) => {
              if (valid) {
                let res = await this.$API.question.addQuestionSort(this.list1);
                this.dialogFormVisible1 = false;
              } else {
                console.log('error submit!!');
                return false;
              }
            })
          }
        })
      },

      async enableAdvertisementUser(advertisementUserId) {
        let res = await this.$API.members.enableAdvertisementUser({
          advertisementUserId,
        })
        this.getAllUserDetailProcessByTimeAsc()
      },

      async stopAdvertisementUser(advertisementUserId) {
        let res = await this.$API.members.stopAdvertisementUser({
          advertisementUserId,
        })
        this.getAllUserDetailProcessByTimeAsc()
      },

      handleSelectionChange(val) {
        console.log(val)
        this.ids = val.filter(function(item) {
          return item.auditStatus == 0
        }).map((item, index) => {
          return item.id;
        }).join(",");
        console.log(this.ids)

      },
      // 点击评价图片，大图预览多张图片
      clickevaluatePicture(row) {
        var srclist = []
        for (const imgArr of row.album) {
          // 把数据库传来的图片放进数组里
          srclist.push('https://www.yushiai.com.cn/' + imgArr)
        }
        this.evaluatePictureList = srclist // 赋值
        // console.log(this.evaluatePictureList)
      },
      refreshList() {
        this.getAllUserDetailProcessByTimeAsc()
      },
      async getAllUserDetailProcessByTimeAsc() {
        let res = await this.$API.members.getSecondaryUserList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          searchText: this.searchText
        })
        console.log(res)
        // this.total = res.data.sumLine;
        // const arr = [];
        // for (let i = 0; i < res.data.rows.length; i++) {
        //   arr.push(res.data.rows[i].album.split(","))
        //   res.data.rows[i].album = arr[i]
        // }
        // console.log(arr)
        this.list = res.data;
        console.log('list', this.list)
      },
      // reSetting() {
      //   this.searchText = '';
      //   this.getAllUserDetailProcessByTimeAsc();
      // },
      async allPassUserDetailProcess() {
        if (this.ids == '') {
          Message({
            message: '请选择用户',
            type: 'error',
            duration: 5 * 1000
          })
          return false;
        }
        let res = await this.$API.audit.passUserDetailProcess({
          // userDetailProcessId: id,
          userDetailProcessIds: this.ids,
          auditResult: '审核通过'
        })
        this.getAllUserDetailProcessByTimeAsc()
      },
      async passUserDetailProcess(id) {
        let res = await this.$API.audit.passUserDetailProcess({
          userDetailProcessIds: id,
          auditResult: '审核通过'
        })
        this.getAllUserDetailProcessByTimeAsc()
      },
      async rejectUserDetailProcess(id) {
        let auditResult = prompt('驳回原因：');
        if (auditResult != null && auditResult != "") {
          let res = await this.$API.audit.rejectUserDetailProcess({
            userDetailProcessId: id,
            auditResult: auditResult
          })
          this.getAllUserDetailProcessByTimeAsc()
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getAllUserDetailProcessByTimeAsc()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNumber = val
        this.getAllUserDetailProcessByTimeAsc()
      },
      filterTag(value, row) {
        console.log(value, row)
        return row.auditStatus == value;
      },
      filterHandler(value, row, column) {
        // const property = column['property'];
        // return row[property] === value;
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
